<style>

    .extension-guides-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
      margin-top: 2rem;
  
    }
    .extension-guide-card {
       display: flex;
     flex-direction: column;
       max-width: 20rem;
       max-height: 30rem;
       gap: 1rem;
  }
    .extension-guide-svg-container {
       height: auto;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.455rem;
     flex-basis: 30%;
  }
    .extension-guide-svg-container img {
     width: 50%;
     height: auto;
  }
    .extension-guide-details {
       display: flex;
       flex-direction: column;
       flex-basis: 77%;
       gap: 10px;
     text-align: center;
  }
    @media (max-width: 767px) {
      .extension-guide-container {
        flex-direction: column;
      }
      .extension-guide-svg-container {
        gap: 0.3rem;
      }
      .extension-guide-svg-container img {
        width: 40%;
      }
      .extenion-guide-card{
        max-width: 30rem;
        flex-direction: column;
      }
     }
  </style>
  
  
  <div class="extension-guides-container">

    {% assign data_file = include.data_file %}
    {% assign guide_title = include.guide_title %}
    {% assign guide_description = include.guide_description %}
    {% assign guide_usecase = include.guide_usecase %} 
    {% assign guide_svg = include.guide_svg %}
    {% assign guide_assests_folder = include.guide_assests_folder %}

  {% assign sorted_guide = site.data[data_file] | sort: guide_title %}
      {% for guide in sorted_guide %}
  
        <div class="extension-guide-card">
        <div class="extension-guide-svg-container">
        {% if guide[guide_svg] %}
          <img src="{{ site.baseurl }}/assets/{{  guide_assests_folder | downcase }}/{{ guide[guide_svg] }}" alt="Edge">
        {% endif %}
         <div style="text-align:center;">{{ guide[guide_title] }}</div>
        </div>
        <div class="extensino-guide-details">
        {% if guide[guide_description] %}
        <div>{{ guide[guide_description] }}</div>
        {% endif %}
        {% if guide[guide_usecase] %}
        <div>{{ guide[guide_usecase] }}</div>
        {% endif %}
        </div>
        </div>
  
      {% endfor %}
   </div>
